<template>
    <div class="voucher-container">
        <div class="top-box">
            <div class="box-left">
                <h3>申请状态</h3>
                <div class="user-info">
                    <div class="user-img"><img :src="attendUser.HeadImage" alt=""></div>
                    <div class="user-content">
                        <p>姓名：{{attendUser.Name}}</p>
                        <p>手机：{{attendUser.Phone}}</p>
                    </div>
                </div>
            </div>
            <div class="box-right">
                <div class="state-icon yellow" v-if="attendUser.Audit==0 || attendUser.Audit==1"></div>
                <div class="state-icon gray" v-if="attendUser.Audit==2"></div>
                <div class="state-icon blue" v-if="attendUser.Audit==3"></div>
            </div>
        </div>
        <div class="middle-box">
            <div class="sign-price">
                需支付参会费：<span v-if="attendUser.Audit==0">参会费用待系统核算</span><span v-else>￥{{attendUser.Cost}}</span>
            </div>
            <div class="order-detail">
                <h3>审核详情：</h3>
                <div class="detail-text"  v-if="attendUserPrectices.length>0">
                  <div class="text-item" v-for="(item,index) in attendUserPrectices" :key="index">
                    <div class="order-text">{{item.SubPrecticeName}}</div>
                    <div class="order-state" :class="{'blue':item.PrecticeAuditEnum==1,'gray':item.PrecticeAuditEnum==2}">{{item.PrecticeAuditEnum | getState}}</div>
                  </div>
                </div>
                <div class="detail-text" v-else>
                  系统正在审核中...
                </div>
            </div>
        </div>
        <div class="upload-box"  v-if="attendUser.Audit!=0">
            <h3>上传凭证</h3>
            <div class="uploadImg-box">
                <div class="preview-item" v-for="(item,index) in imgArry" :key="index"><van-icon name="clear" @click="deleteImg(index)" /><img :src="item"></div>
                <div class="upload-btn" v-if="imgArry.length<3" @click="showFileModel"></div>
            </div>
        </div>
        <div class="cause-box" v-if="attendUser.Audit==2">
            <h3>驳回原因</h3>
            <div class="cause-text">
                <p>{{attendUser.Wish}}</p>
            </div>
        </div>
        <div class="bottom-btn" v-if="attendUser.Audit!=0">
          <van-button size="large" type="primary" :disabled="attendUser.Audit!=1" @click="submitVoucher">提交</van-button>
        </div>
        <!-- 上传图片 -->
        <van-actionsheet v-model="fileModel">
                <div class="actionsheet-title">请上传照片</div>
                <div class="actionsheet-row">
                    <span>从相册中选择</span>
                    <input type="file" accept="image/*" @change="fileChange" @click="fileToggle(0)">
                </div>
                <div class="actionsheet-row">
                    <span>拍照</span>
                    <input type="file" capture="camera" accept="image/*" @change="fileChange" @click="fileToggle(0)">
                </div>
                <div class="actionsheet-close" @click="fileToggle(0)">取消</div>
        </van-actionsheet>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'uploadVoucher',
  inject: ['reload'],
  data () {
    return {
      fileModel: false,
      imgArry: [],
      credit: {},
      attendUser: {},
      attendUserPrectices: [],
      number: '',
      st: ''
    }
  },
  filters: {
    getState (state) {
      switch (state) {
        case 0:
          return '审核中'
        case 1:
          return '已通过'
        case 2:
          return '已驳回'
      }
    }
  },
  created () {
    this.number = this.$route.query.number
    this.st = this.$route.query.st
    var that = this
    if (this.$route.query.number !== '' && this.$route.query.st !== '') {
      axios({
        url: that.baseUrl + '/api/exhibition/getCredit/' + that.$route.query.st,
        method: 'GET'
      })
        .then(res => {
          that.credit = res.data
        })
        .catch(err => {
          console.log(err)
        })
      axios({
        url:
          that.baseUrl +
          '/api/exhibition/getAttendUser/' +
          that.$route.query.number,
        method: 'GET'
      })
        .then(res => {
          console.log(res)
          that.attendUser = res.data
          if (that.attendUser.AuditImgOne) {
            that.imgArry.push(that.attendUser.AuditImgOne)
          }
          if (that.attendUser.AuditImgTwo) {
            that.imgArry.push(that.attendUser.AuditImgTwo)
          }
          if (that.attendUser.AuditImgThree) {
            that.imgArry.push(that.attendUser.AuditImgThree)
          }
          if (res.data.Audit === 4) {
            window.location.href =
              that.baseUrl +
              '/Q/' +
              res.data.ST +
              '/False?phone=' +
              res.data.Phone
          }
        })
        .catch(err => {
          console.log(err)
        })
      axios({
        url:
          that.baseUrl +
          '/api/exhibition/getAttendUserPrecticeList/' +
          that.$route.query.number,
        method: 'GET'
      })
        .then(res => {
          that.attendUserPrectices = res.data
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  methods: {
    deleteImg (index) {
      var that = this
      this.$dialog
        .confirm({
          message: '确认删除该图片？'
        })
        .then(() => {
          // on confirm
          that.imgArry.splice(index, 1)
        })
        .catch(() => {
          // on cancel
        })
    },
    showFileModel () {
      this.fileModel = true
    },
    fileToggle (state) {
      if (state) {
        this.fileModel = true
      } else {
        this.fileModel = false
      }
    },
    fileChange (e) {
      this.fileModel = false
      var that = this
      var reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      reader.onload = function (e) {
        var dataURL = e.target.result
        that.imgArry.push(dataURL)
      }
    },
    submitVoucher () {
      var that = this
      if (this.imgArry.length < 1) {
        this.$toast('请先上传凭证图片')
      } else {
        this.attendUser.AuditImgOne = this.imgArry[0]
        this.attendUser.AuditImgTwo = this.imgArry[1]
        this.attendUser.AuditImgThree = this.imgArry[2]
        axios({
          method: 'POST',
          url: that.baseUrl + '/api/exhibition/submitAuditImg',
          contentType: 'application/json; charset=utf-8',
          data: that.attendUser
        }).then(res => {
          if (res.data.State) {
            that.$toast.success('提交成功！')
            that.reload()
          } else {
            that.$toast(res.data.Message)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style>
@import '../assets/css/state.css';
</style>
